<template>
    <div class="page">
        <span>每页 <input type="number" :value="pageSize" @input="$emit('cutSize', $event)"> 页，共{{ total }}条</span>
        <ul>
            <li v-for="(item, index) in pageList" :key="index" :class="{
                active: item.num == current
            }" @click="cutPage(item)">{{ item.num }}</li>
        </ul>
    </div>
</template>
<script>
export default {
    props: {
        pageSize: {
            type: Number,
            default: 3
        },
        total: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            // pageList: [],
            current: 1, // 当前页
        }
    },
    // watch: {
    //     total() {
    //         // 显示的总页数，等于总条数除以每页显示的条数。

    //         let num = Math.ceil(this.total / this.pageSize);
    //         // console.log(num);
    //         for (let i = 0; i < num; i++) {
    //             this.pageList.push(i + 1)
    //         }
    //     }
    // },
    // computed: {
    //     pageList() {
    //         let num = Math.ceil(this.total / this.pageSize);
    //         // console.log(num);
    //         let arr = [];
    //         for (let i = 0; i < num; i++) {
    //             arr.push(i + 1)
    //         }
    //         return arr
    //     }
    // },

    computed: {
        pageList() {
            let num = Math.ceil(this.total / this.pageSize);
            let arr = [];
            if (num <= 7) {
                for (let i = 0; i < num; i++) {
                    arr.push({
                        num: i + 1,
                        isShow: ""
                    })
                }
            } else {
                if (this.current >= 5 && this.current + 3 >= num) {
                    arr.push({
                        num: 1,
                        isShow: ""
                    })
                    arr.push({
                        num: "...",
                        isShow: "prev"
                    })
                    for (let i = 0; i <= 5; i++) {
                        arr.push({
                            num: num - (5 - i),
                            isShow: ""
                        })
                    }
                } else if (this.current >= 5 && this.current + 3 < num) {
                    arr = [{
                        num: 1,
                        isShow: ""
                    }, {
                        num: "...",
                        isShow: "prev"
                    }, {
                        num: this.current - 2,
                        isShow: ""
                    }, {
                        num: this.current - 1,
                        isShow: ""
                    }, {
                        num: this.current,
                        isShow: ""
                    }, {
                        num: this.current + 1,
                        isShow: ""
                    }, {
                        num: this.current + 2,
                        isShow: ""
                    }, {
                        num: "...",
                        isShow: "next"
                    }, {
                        num: num,
                        isShow: ""
                    }]
                } else {
                    for (let i = 0; i <= 5; i++) {
                        arr.push({
                            num: i + 1,
                            isShow: ""
                        })
                    }
                    arr.push({
                        num: "...",
                        isShow: "next"
                    })
                    arr.push({
                        num: num,
                        isShow: ""
                    })
                }
            }
            return arr
        }
    },

    methods: {
        cutPage(val) {
            // let page = val.isShow == "prev" ? this.current - 2 : val.isShow == "next" ? this.current + 2 : val.num;
            if (val.isShow == "prev") {
                this.current = this.current - 2
            }
            if (val.isShow == "next") {
                this.current = this.current + 2
            }
            if (!val.isShow) {
                this.current = val.num;
            }
            this.$emit('cutPage', this.current);
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

li {
    list-style: none;
    display: inline-block;
    width: 30px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #ccc;
    margin-right: 10px;
    cursor: pointer;
}

.active {
    background: skyblue;
}
</style>